<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-card class="box-card">
      <el-alert title="注意：只允许为第三级分类设置相关参数！"
        type="warning" :closable="false" show-icon>
      </el-alert>
      <div class="block">
        <span class="demonstration">选择商品分类：</span>
        <el-cascader v-model="catId" :options="paramsList" :props="{ label: 'cat_name',value:'cat_id'}"
          clearable></el-cascader>
      </div>
      <el-tabs v-model="activeName" @tab-click="loadCatParams(activeName)">
        <el-tab-pane label="动态参数" name="many" >
            <template>
                <el-button type="primary" size="small" >添加参数</el-button>
                <el-table :data="params.many"  border style="width: 100%">
                    <el-table-column type="expand" label="明细" class="expand-column">
                        <template #default="{ row }" >
                            <el-tag :key="index" v-for="(vals,index) in row.attr_vals.split(',')"  closable
                                :disable-transitions="false" @close="handleClose(tag)">
                                {{vals}}
                            </el-tag>
                                <el-input class="input-new-tag" v-if="inputVisible"
                                v-model="inputValue" ref="saveTagInput" size="small"
                                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">                                                               
                                </el-input>
                            <el-button v-else class="button-new-tag" size="small" >+ New Tag</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column type="index"  label="序号" width="80"></el-table-column>
                    <el-table-column prop="attr_name" label="参数名称" ></el-table-column>
                    <el-table-column label="操作" >
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger"  icon="el-icon-delete" size="mini">删除</el-button>
                    </el-table-column>
                </el-table>
            </template>
        </el-tab-pane>
        <el-tab-pane label="静态参数" name="only" >
            <template>
                <el-button type="primary" size="small" >添加属性</el-button>
                <el-table :data="params.only"  border style="width: 100%">
                    <el-table-column type="index"  label="序号" width="80"></el-table-column>
                    <el-table-column prop="attr_name" label="属性名称" ></el-table-column>
                    <el-table-column  label="操作" >
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger"  icon="el-icon-delete" size="mini">删除</el-button>
                    </el-table-column>                   
                </el-table>
            </template>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'many',
        inputVisible: false,
        inputValue: '',
        paramsList:[],
        catId:[],
        catparams:null,
        params:{
            many:null,
            only:null
        }
    };
  },
  watch:{
   catId(){
       this.params={};
       this.loadCatParams(this.activeName);
   }
  },
  methods: {
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
    handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
            this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
        },
  async  loadParams(){
        try {
            let result= await this.$api.getCategories();
            this.paramsList=result
        } catch (error) {
            // console.log(error)
        }
    },
    async loadCatParams(name="many"){
        if(this.params[name]&&this.params[name].length>0){
            return;
        }
        try {
            let result= await this.$api.getCatParams(this.catId[2],name);
            this.params[name]=result
            console.log(result)
        } catch (error) {
            // console.log(error)
        }
    }
  },
  created(){
      this.loadParams();
  }
};
</script>

<style lang="less">
.el-breadcrumb {
  margin-bottom: 20px;
}
.block {
  margin: 20px 0;
}
.el-table{
  margin-top: 20px;
}
.el-tag  {
    margin:10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>